@charset "utf-8";
@import "reset";
@import "common";

.exchangeWeb{
    width: 100%;
    height: 100%;
    background: url(../img/back.png) no-repeat center center/cover;
    padding-top: r(320);
    box-sizing: border-box;
    .content{
        width: r(360);
        margin: 0 auto;
        text-align: center;
        p{
            font-size: r(32);
            color: #e7c598;
        }
        input{
            width: r(325);
            line-height: r(56);
            margin: r(40) auto r(60);
            border: none;
            background: #e7c598;
            font-size: r(28);
            border-radius: r(10);
            text-align: center;
        }
        button{
            width: r(250);
            line-height: r(50);
            color: #e7c598;
            background: url(../img/exchange/btnSure.png) no-repeat center center/cover;
            font-size: r(24);
            outline: none;
        }
    }
    .back a{
        width: r(40);
        height: r(40);
        border-radius: 50%;
        position: absolute;
        bottom: r(25);
        right: r(56);
        overflow: hidden;
        img{
            height: 100%;
            @include abCenter;
        }
    }
    .success,.fail{
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.4);
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
        display: none;
        .text{
            width: r(414);
            height: r(250);
            @include abCenter;
            background: #e7c598;
            border-radius: r(10);
            text-align: center;
            .close{
                width: r(40);
                height: r(40);
                position: absolute;
                right: r(15);
                top:r(10);
                img{
                    width: 100%;
                }
            }
            p{
                width: r(300);
                font-weight: bold;
                color: #bf0c21;
            }
        }
    }
    .success{
        .text{
            p{
                font-size: r(50);
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        }
    }
    .fail{
        .text{
            .middle{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
            p{
                font-size: r(32);
            }
            button{
                width: r(222);
                line-height: r(40);
                font-size: r(24);
                background: #BF0C21;
                margin-top: r(20);
                color: #e7c598;
                border-radius: r(10);
            }
        }
    }
}
